// 自定义的 ajax请求函数
// 参数1: 请求的url地址
// 参数2: 请求的方式 默认值是get
// 参数3: 请求携带的参数 默认值是 空字符串
// 参数4: 请求结束 执行的 回调函数 默认值是 空函数
function myAjax(url , type = 'get' , data = '' , callback = function(){}){
    // 1, 创建 ajax 对象 兼容低版本IE浏览器
    let xhr ;
    if( XMLHttpRequest ){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 2, 设定 open()
    // 请求方式 有 get / post 两种
    // get 方式 还可以 在 参数2 中 携带数据
    if( type === 'get' ){
        // 请求方式是 get  url地址后拼接携带的参数
        xhr.open( 'get' , `${url}?${data}` );

    }else if( type === 'post' ){

        // 请求方式是 post url地址后 不 拼接参数
        xhr.open( 'post' , url );
    }

    // 3, 如果是 post 方式 设定 请求携带参数数据格式
    if( type === 'post' ){
        xhr.setRequestHeader( 'content-type' , 'application/x-www-form-urlencoded' );
    }

    // 4, 设定 send()
    // get 方式 直接 send 发送请求
    // post 方式 携带 传参数据
    if( type === 'get' ){
        xhr.send();
    }else if( type === 'post' ){
        xhr.send( data );
    }

    // 5, 接收 响应结果
    // 为了兼容低版本IE浏览器 
    xhr.onreadystatechange = function(){
        if( xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status) ){
            // 调用执行 回调函数程序 也就是 输出的参数4的程序代码内容
            // 调用 回调函数 赋值 参数实参 
            // 是 请求 执行结束 获取的 响应数据
            callback( xhr.responseText );
        }
    }  

}


// 封装一个函数 执行 promise语法 封装的 ajax请求
function myPAjax( url , type = 'get' , data = '' ){
    // 创建一个 promise对象 
    const p = new Promise(function(f,r){
        // 执行ajax请求

        // 1, 创建 ajax 对象 兼容低版本IE浏览器
        let xhr ;
        if( XMLHttpRequest ){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        // 2, 设定 open()
        // 请求方式 有 get / post 两种
        // get 方式 还可以 在 参数2 中 携带数据
        if( type === 'get' ){
            // 请求方式是 get  url地址后拼接携带的参数
            xhr.open( 'get' , `${url}?${data}` );

        }else if( type === 'post' ){

            // 请求方式是 post url地址后 不 拼接参数
            xhr.open( 'post' , url );
        }


        // 3, 如果是 post 方式 设定 请求携带参数数据格式
        if( type === 'post' ){
            xhr.setRequestHeader( 'content-type' , 'application/x-www-form-urlencoded' );
        }

        // 4, 设定 send()
        // get 方式 直接 send 发送请求
        // post 方式 携带 传参数据
        if( type === 'get' ){
            xhr.send();
        }else if( type === 'post' ){
            xhr.send( data );
        }

        // 5, 接收 响应结果
        // 为了兼容低版本IE浏览器 
        xhr.onload = function(){
            if( xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status) ){
                // 执行成功 触发的回调函数
                f( xhr.responseText );
            }else{
                // 执行失败 触发的回调函数
                r();
            }
        }  
    });

    // 最终 返回 这个 promise对象
    // 但是 没有定义 参数1 参数2 执行的具体程序
    return p;
}

// 封装一个函数 通过 promise语法 执行 jQuery的ajax请求
// 简单的就封装几个常用参数
function myPromiseJQueryAjax( url , type = 'get' ,  data = '' , dataType = 'text' , jsonp , timeout = 5000 ){
    // 创建一个 promise对象
    const p = new Promise(function(f,r){
        // 执行的是 jQuery的 ajax请求
        $.ajax({
            url: url, 
            type: type , 
            data: data,
            dataType: dataType,
            jsonp: jsonp,
            timeout: timeout,
            success: f,
            error: r,
        })
    });

    // return返回这个promise对象
    return p;
}
